html,
body,
#app {
    height: 100%;
    padding: 0;
    margin: 0;
}

/* 
    reset
*/
* {
    padding: 0;
    margin: 0;
}

.menu-popper123 {
    transform: translateX(-8px);
}

/* 主区加载动画 */
/*fade*/
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.18s;
    position: absolute;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

/* 面包动画 */
/*fade*/
/* 面包屑动画 - 从右到左进入，从左到右离开 */
/* 面包屑动画 - 从右到左进入，从左到右离开 */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
    transition: opacity 0.5s, transform 0.5s;
}

/* 进入动画初始状态：从右边进入 */
.breadcrumb-enter-from {
    opacity: 0;
    transform: translateX(100%);
}

/* 进入动画结束状态：移动到原位 */
.breadcrumb-enter-to {
    opacity: 1;
    transform: translateX(0);
}

/* 离开动画初始状态：在原位 */
.breadcrumb-leave-from {
    opacity: 1;
    transform: translateX(0);
}

/* 离开动画结束状态：向右移动并渐隐 */
.breadcrumb-leave-to {
    opacity: 0;
    transform: translateX(100%);
}